<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>IE图片上传</title>
    <link rel="stylesheet" href="http://js.jdhui.com/asset/2.0/main/css/style.css">
    <style>
        form {
            height: 100%;
            width: 100%;
        }
        
        .shop-item {
            width: 490px;
            height: 200px;
            margin: 0 auto;
        }
        
        .btn-wrap {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>

<body style="background: #FFF;">
    <div class="shop-item">
        <ul class="img-list cl" id="prove-img">
            <li>
                <form action="http://imageapi.jdhdev.jdhui.com/file/uploadImg" enctype="multipart/form-data" id="uploadimage-form1" method="post">
                    <a href="javascript:;" class="img-upload">
                        <div id="uploadimage-preview1" class="uploadimage-preview">
                            <img src="http://js.jdhui.com/asset/2.0/main/images/default-null.png" alt="" id="uploadimage-img1">
                        </div>
                        <input type="file" name="file" accept="image/gif, image/jpeg, image/jpg, images/png" multiple="multiple" id="uploadimage-file1" />
                        <input type="hidden" name="img1" class="imgurl" id="uploadimage-url1">
                        <div id="uploadimage-loading1" style="display: none;">Uploading...</div>
                        <p>图片</p>
                        <input type="hidden" name="rootPath" value="refund" />
                    </a>
                </form>
            </li>
            <li>
                <form enctype="multipart/form-data" method="post" action="http://imageapi.jdhdev.jdhui.com/file/uploadImg" id="uploadimage-form2">
                    <a href="javascript:;" class="img-upload">
                        <div id="uploadimage-preview2" class="uploadimage-preview">
                            <img src="http://js.jdhui.com/asset/2.0/main/images/default-null.png" alt="" id="uploadimage-img2">
                        </div>
                        <input type="file" name="file" accept="image/gif, image/jpeg, image/jpg, images/png" multiple="multiple" id="uploadimage-file2" />
                        <input type="hidden" name="img2" class="imgurl" id="uploadimage-url2">
                        <div id="uploadimage-loading2" style="display: none;">Uploading...</div>
                        <p>图片</p>
                    </a>
                    <input type="hidden" name="rootPath" value="refund" />
                </form>
            </li>
            <li>
                <form enctype="multipart/form-data" method="post" action="http://imageapi.jdhdev.jdhui.com/file/uploadImg" id="uploadimage-form3">
                    <a href="javascript:;" class="img-upload">
                        <div id="uploadimage-preview3" class="uploadimage-preview">
                            <img src="http://js.jdhui.com/asset/2.0/main/images/default-null.png" alt="" id="uploadimage-img3">
                        </div>
                        <input type="file" name="file" accept="image/gif, image/jpeg, image/jpg, images/png" multiple="multiple" id="uploadimage-file3" />
                        <input type="hidden" name="img3" class="imgurl" id="uploadimage-url3">
                        <div id="uploadimage-loading3" style="display: none;">Uploading...</div>
                        <p>图片</p>
                    </a>
                    <input type="hidden" name="rootPath" value="refund" />
                </form>
            </li>
            <li>
                <form enctype="multipart/form-data" method="post" action="http://imageapi.jdhdev.jdhui.com/file/uploadImg" id="uploadimage-form4">
                    <a href="javascript:;" class="img-upload">
                        <div id="uploadimage-preview4" class="uploadimage-preview">
                            <img src="http://js.jdhui.com/asset/2.0/main/images/default-null.png" alt="" id="uploadimage-img4">
                        </div>
                        <input type="file" name="file" accept="image/gif, image/jpeg, image/jpg, images/png" multiple="multiple" id="uploadimage-file4" />
                        <input type="hidden" name="img4" class="imgurl" id="uploadimage-url4">
                        <div id="uploadimage-loading4" style="display: none;">Uploading...</div>
                        <p>图片</p>
                    </a>
                    <input type="hidden" name="rootPath" value="refund" />
                </form>
            </li>
            <li>
                <form enctype="multipart/form-data" method="post" action="http://imageapi.jdhdev.jdhui.com/file/uploadImg" id="uploadimage-form5">
                    <a href="javascript:;" class="img-upload">
                        <div id="uploadimage-preview5" class="uploadimage-preview">
                            <img src="http://js.jdhui.com/asset/2.0/main/images/default-null.png" alt="" id="uploadimage-img5">
                        </div>
                        <input type="file" name="file" accept="image/gif, image/jpeg, image/jpg, images/png" multiple="multiple" id="uploadimage-file5" />
                        <input type="hidden" name="img5" class="imgurl" id="uploadimage-url5">
                        <div id="uploadimage-loading5" style="display: none;">Uploading...</div>
                        <p>图片</p>
                    </a>
                    <input type="hidden" name="rootPath" value="refund" />
                </form>
            </li>
        </ul>
        <div class="btn-wrap">
            <button type="button" class="btn btn-submit">确定</button>
        </div>
    </div>
</body>
<script type="text/javascript" src="http://js.jdhui.com/lib/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://js.jdhui.com/asset/2.0/main/js/public.min.js"></script>
<script type="text/javascript" src="http://js.jdhui.com/common/util.js"></script>
<script type="text/javascript">
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return r[2];
        return null;
    }
    var _action = decodeURIComponent(getQueryString("action"));
    var _host = getQueryString("host");
    $("form").map(function() {
        $(this).attr("action", _action);
    });

    for (var i = 0; i < 5; i++) {
        var img_idx = i + 1;
        var tmpimg = getQueryString("img" + img_idx);
        if (tmpimg) {
            var _tmpimg = decodeURIComponent(tmpimg);
            $("#uploadimage-img" + img_idx).attr("src", _tmpimg);
            $("#uploadimage-url" + img_idx).val(_tmpimg);
        }
    }

    $(document).on('click', '#prove-img .img-upload input[type=file]', function() {
        var id = $(this).closest("li").index() + 1; //判断是第几个图像
        $(this).change(function(e) {
            var fileName = "uploadimage-file" + id; //所选择元素
            var previewName = 'uploadimage-preview' + id; //预览元素
            var loadingName = "uploadimage-loading" + id;
            var imgName = "uploadimage-img" + id;
            imgUpload(e, id, fileName, previewName, loadingName, imgName);
        });
    });

    //图片上传函数
    function imgUpload(e, id, fileName, previewName, loadingName, imgName) {
        // var action = "http://imageapi.jdhdev.jdhui.com/file/uploadImg";
        // var host = "http://image.jdhdev.jdhui.com/";
        var action = decodeURIComponent(_action);
        var host = decodeURIComponent(_host);
        var form = document.getElementById("uploadimage-form" + id); //表单元素
        var file = document.getElementById(fileName);
        var loading = document.getElementById(loadingName);

        function callback(data) {
            try {
                var
                    result = $js.json.parse(data),
                    items = result["source"].split(",");
                $("#uploadimage-url" + id).val(host + items)
                    // $("#uploadimage-url"+id,parent.document).val(host + items);
                    // $(e.target).siblings('input[name=img' + id + ']').val(host + items);
                document.getElementById(imgName).setAttribute('src', "");
                for (var i = 0, l = items.length; i < l; i++) {
                    document.getElementById(imgName).setAttribute('src', host + items[i]);
                }

                file.style.display = "block";
                loading.style.display = "none";
            } catch (e) {
                alert(e);
            }
        }

        if (file.value) {
            file.style.display = "none";
            loading.style.display = "block";
            if ("FormData" in window) { // for IE10+, Std
                var formData = new FormData();
                // formData.append('ratio', "200x0,400x0,800x0");
                // formData.append('rootPath', "jdh");
                formData.append('file', file.files[0]);
                formData.append('rootPath', "refund");
                $js.ajax({
                    url: action,
                    type: "POST",
                    cache: false,
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data, xhr) {
                        callback(data);
                    },
                    error: function(xhr) {
                        alert("Error: " + xhr.status + " " + xhr.statusText);
                    }
                });
            } else { // for IE9-
                form.action = action + (/\?/.test(action) ? "&" : "?") + "windowname=1";
                $js.windowName({
                    form: form,
                    callback: function(data) {
                        callback(data);
                    }
                });
            }
        }
    }
    $(".btn-submit").click(function() {
        var img_group = $("#prove-img .img-upload .imgurl");
        var img_group_arr = [];
        for (var i = 0; i < img_group.length; i++) {
            if (img_group[i].value) {
                img_group_arr.push(img_group[i].value)
            }
        }
        // var a=$("#img_group,window.opener.document").val();
        alert(window.opener);
        window.opener.hello("world!");
        try {
            if (window.opener && window.opener.document != null) {
                var a = window.opener.document;
                for (var i = 0; i < img_group_arr.length; i++) {
                    if (img_group_arr[i]) {
                        var _tmpidx = i + 1;
                        var b = $("#uploadimage-url" + _tmpidx, a);
                        b.value = img_group_arr[i];
                    }
                }
                window.close()
            }
        } catch (e) {
            if (e.description.indexOf('拒绝访问') !== -1) {
                alert("无法上传成功，请设置浏览器的安全级别！")
            } else {
                // some other problem, let it blow up
                throw e;
            }
        }
    })
</script>

</html>